<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      /* 基本样式 */
      body {
        font-family: Arial, sans-serif;
      }

     .form-inline {
        display: inline-block;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th,
      td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
      }

      th {
        background-color: #f2f2f2;
      }

      table th:nth-of-type(3),
      table td:nth-of-type(3) {
        width: 10%;
      }

      @media print {
        /* 设置较小的页面边距 */
        @page {
          margin: 0.5cm;
        }

        /* 保持内容的显示，不隐藏header, footer, nav, form */
        header,
        footer,
        nav,
        form {
          display: block;
        }

        /* 调整表格和单元格的字体大小 */
        table,
        th,
        td {
          font-size: smaller; /* 减小字体大小 */
        }

        table th:nth-of-type(2),table td:nth-of-type(2) {
        width: 10%;
      }

        /* 如果需要，可以取消分页规则 */
        /* table {
    page-break-inside: avoid;
  } */

        /* 其他打印样式规则 */
        /* 隐藏不需要打印的部分 */
        header,
        footer,
        nav,
        form {
          display: none;
        }
      }
    </style>
    <title>打印数据</title>
  </head>

  <body>
    <!-- 导航 -->
    <header>
      <nav>
        <button id="printButton">点击我打印</button>
        <button id="backButton">返回首页</button>
        <form method="post" action="{% url 'filter_by_date' %}">
          {% csrf_token %}
          <span>检验日期:</span>
          <input type="date" id="date" name="date" />
          <input type="submit" value="提交" />
          <p>选择的日期: {{ selected_date }}</p>
        </form>

        <form class="form-inline" method="get" action="{% url 'index' %}">
          {% csrf_token %}
          <span>批号:</span>
          <button type="submit" name="order" value="asc" {% if order == 'asc' %}class="active"{% endif %}>从小到大</button>
          <button type="submit" name="order" value="desc" {% if order == 'desc' %}class="active"{% endif %}>从大到小</button>
        </form>

        <form class="form-inline" method="post" action="{% url 'filter_by_batch' %}">
          {% csrf_token %}
          <select name="批号">
              <option value="">请选择批号</option>
              {% for batch in distinct_batches %}
              <option value="{{ batch }}">{{ batch }}</option>
              {% endfor %}
          </select>
          <input type="submit" value="提交">
      </form>



      </nav>
    </header>
    <div id="new-layout-container">
        <table>
            <thead>
                <tr>
                <th>选择<input type="checkbox" id="selectAllCheckbox"></th>
                <th>检验单号</th>
                <th>检验日期</th>
                <th>存货编码</th>
                <th>存货名称</th>
                <th>规格型号</th>
                <th>品牌</th>
                <th>供应商编码</th>
                <th>供应商名称</th>
                <th>批号</th>
                <th>生产日期</th>
                <th>合格数量</th>
                <th>不良数量</th>
                </tr>
            </thead>
            <tbody>
                {% for data in datas %}
                <tr>
                <td>
                    <input
                    type="checkbox"
                    name="selected_rows"
                    value="{{ data.检验单号 }}"
                    />
                </td>
                <td>{{data.检验单号}}</td>
                <td>{{ data.检验日期|date:"Y-m-d" }}</td>
                <td>{{data.存货编码}}</td>
                <td>{{data.存货名称}}</td>
                <td>{{data.规格型号}}</td>
                <td>{{data.品牌}}</td>
                <td>{{data.供应商编码}}</td>
                <td>{{data.供应商名称}}</td>
                <td>{{data.批号}}</td>
                <td>{{data.生产日期|date:"Y-m-d"}}</td>
                <td>{{data.合格数量}}</td>
                <td>{{data.不良数量}}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div id="data-container"></div>
    <!-- 尾部 -->
    <footer>
      <button id="confirmButton">确认</button>
    </footer>
    <script>
      // 等待DOM加载完毕
      document.addEventListener("DOMContentLoaded", function () {
        // 获取打印按钮元素
        var printButton = document.getElementById("printButton");

        // 为打印按钮添加点击事件监听器
        printButton.addEventListener("click", function () {
          // 直接调用window.print()方法来触发打印对话框
          window.print();
        });

        // 获取返回按钮元素
        var backButton = document.getElementById("backButton");

        // 获取所有表单元素
        var forms = document.querySelectorAll("form");

        // 为每个表单添加提交事件监听器
        forms.forEach(function (form) {
          form.addEventListener("submit", function (event) {
            // // 阻止表单默认提交行为
            // event.preventDefault();

            // 隐藏所有表单
            forms.forEach(function (f) {
              f.style.display = "none";
            });

            // // 显示返回按钮
            // backButton.style.display = 'block';
          });
        });

        // 为返回按钮添加点击事件监听器
        backButton.addEventListener("click", function () {
          // 隐藏返回按钮
          backButton.style.display = "none";

          // 显示所有表单
          forms.forEach(function (f) {
            f.style.display = "block";
          });

          // 跳转到首页
          window.location.href = "http://192.168.12.3:8000/";
          // window.location.href = "http://127.0.0.1:8000/";
        });


        // 获取全选复选框
        var selectAllCheckbox = document.getElementById('selectAllCheckbox');
        // 获取所有子复选框
        var checkboxes = document.querySelectorAll('input[name="selected_rows"]');
    
        // 为全选复选框添加点击事件监听器
        selectAllCheckbox.addEventListener('change', function() {
          // 同步全选复选框的状态到所有子复选框
          checkboxes.forEach(function(checkbox) {
            checkbox.checked = this.checked;
          }, selectAllCheckbox);
        });
    
        // 为每个子复选框添加点击事件监听器
        checkboxes.forEach(function(checkbox) {
          checkbox.addEventListener('change', function() {
            // 如果存在未选中的子复选框，则取消全选复选框的选中状态
            if (!this.checked) {
              selectAllCheckbox.checked = false;
            }
          });
        });
    
        // 获取确认按钮元素
        var confirmButton = document.getElementById("confirmButton");
    
        // 为确认按钮添加点击事件监听器
        confirmButton.addEventListener("click", function () {
          // 创建一个数组来存储选中的数据对象
          var selectedDataArray = [];
          // // 获取所有复选框
          // var checkboxes = document.querySelectorAll('input[name="selected_rows"]');
          // 获取所有数据行
          var rows = document.querySelectorAll("tbody tr");
    
          checkboxes.forEach(function (checkbox, index) {
            if (checkbox.checked) {
      //         // 根据checkbox的索引找到对应的数据行
      // var index = Array.prototype.indexOf.call(checkboxes, checkbox);
              // 根据检验单号找到对应的数据行
              var 检验单号 = checkbox.value;
              var dataRow = rows[index]; // 直接使用当前索引获取对应的行
              console.log("有数据");
    
              if (dataRow) {
                // 构建数据对象
                console.log("有data")
                // var dataObj = {
                //   // 检验单号: 检验单号,
                //   存货编码: dataRow.cells[3].textContent,
                //   存货名称: dataRow.cells[4].textContent,
                //   规格型号: dataRow.cells[5].textContent,
                //   品牌: dataRow.cells[6].textContent,
                //   供应商编码: dataRow.cells[7].textContent,
                //   供应商名称: dataRow.cells[8].textContent,
                //   批号: dataRow.cells[9].textContent,
                //   生产日期: dataRow.cells[10].textContent,
                //   合格数量: dataRow.cells[11].textContent,
                //   // 不良数量: dataRow.cells[12].textContent,
                // };
                // 假设您已经有了一个包含属性名称的数组
                var propertyNames = [
                  '存货编码', '存货名称', '规格型号', '品牌',
                  '供应商编码', '供应商名称', '批号', '生产日期',
                  '合格数量' // 这里没有包括 '不良数量'
                ];

                // 然后使用这个数组来创建 dataObj 对象
                var dataObj = {};
                for (var i = 0,j=3; i < propertyNames.length; i++,j++) {
                  dataObj[propertyNames[i]] = dataRow.cells[j].textContent;
                }
                // 将数据对象添加到数组中
                selectedDataArray.push(dataObj);
                console.log(selectedDataArray);
              }
            }
          });
    
          // 如果没有选中任何行，则不执行任何操作或给出提示
          if (selectedDataArray.length === 0) {
            alert("请选择至少一行数据。");
            return;
          }
    
          // 发送数据到服务器的代码
          // 例如使用 fetch API 发送数据
      //     fetch("{% url 'selected_data' %}", {
      //           method: 'POST',
      //           headers: {
      //               'X-CSRFToken': '{{ csrf_token }}',
      //               'Content-Type': 'application/json',
      //           },
      //           body: JSON.stringify(selectedDataArray),
      //       })
      //       .then(response => response.json())
      //       .then(data => {
      //           if (data.success) {
      //               // 使用服务器返回的数据
      //       window.location.href = `{% url 'show_selected_data' %}?data=${encodeURIComponent(JSON.stringify(data.data))}`;
      //   } else {
      //       alert("无法获取选中的数据，请稍后再试。");
      //   }
      //     })
      //     .catch(error => {
      //         console.error('Error:', error);
      //         alert("请求失败，请稍后再试。");
      //     });
      // });

          // 发送数据到服务器的代码
          fetch("{% url 'selected_data' %}", {
              method: 'POST',
              headers: {
                  'X-CSRFToken': '{{ csrf_token }}',
                  'Content-Type': 'application/json',
              },
              body: JSON.stringify(selectedDataArray),
          })
          .then(response => response.json())
          .then(data => {
              if (data.success) {
                  // 假设selectedDataArray是服务器返回的数据数组
                  var dataString = JSON.stringify(data.data);
                  // 替换所有的百分号
                  var safeDataString = dataString.replace(/%/g, '#');
                  // 发送数据时使用安全的字符串
                  window.location.href = `{% url 'show_selected_data' %}?data=${encodeURIComponent(safeDataString)}`;
              } else {
                  alert("无法获取选中的数据，请稍后再试。");
              }
          })
          .catch(error => {
              console.error('Error:', error);
              alert("请求失败，请稍后再试。");
          });
      });

    });
    </script>
        
  </body>
</html>
